class Particle {
  constructor(x, y, color, delay = 0) {
    this.x = x
    this.y = y
    this.originalX = x  // 保存原始位置
    this.originalY = y
    this.color = color
    this.size = Math.random() * 4 + 3
    this.speedX = (Math.random() * 2 - 1) * 1.5
    this.speedY = (Math.random() * 2 - 1) * 1.5
    this.gravity = 0.02
    this.life = 5
    this.decay = Math.random() * 0.02 + 0.01
    this.rotation = Math.random() * Math.PI * 2
    this.rotationSpeed = (Math.random() - 0.5) * 0.1
    this.delay = delay  // 添加延迟属性
    this.active = false // 是否开始运动
  }

  update() {
    // 如果还在延迟中，不更新位置
    if (this.delay > 0) {
      this.delay -= 0.016 // 约等于60帧的一帧时间
      return
    }
    
    if (!this.active) {
      this.active = true
    }

    this.speedY += this.gravity
    this.x += this.speedX
    this.y += this.speedY
    this.rotation += this.rotationSpeed
    this.life -= this.decay
  }

  draw(ctx) {
    ctx.save()
    ctx.translate(this.x, this.y)
    ctx.rotate(this.active ? this.rotation : 0)
    ctx.fillStyle = this.color
    ctx.globalAlpha = Math.min(1, this.life / 2)
    ctx.beginPath()
    
    // 根据是否激活决定绘制矩形还是小点
    if (this.active) {
      ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size)
    } else {
      ctx.fillRect(-1, -1, 2, 2)  // 未激活时绘制小点
    }
    
    ctx.restore()
  }
}

export default class TextParticleEffect {
  constructor(canvas) {
    this.canvas = canvas
    this.ctx = canvas.getContext('2d')
    this.particles = []
    this.text = ''
    this.animationId = null
    
    this.resize()
    window.addEventListener('resize', this.resize.bind(this))
  }

  resize() {
    this.canvas.width = this.canvas.offsetWidth
    this.canvas.height = this.canvas.offsetHeight
  }

  setText(text) {
    this.text = text
  }

  explode() {
    // 取消之前的动画
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
    }
    
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    this.particles = []
    
    const fontSize = 100
    this.ctx.font = `bold ${fontSize}px Arial`
    this.ctx.fillStyle = 'white'
    this.ctx.textAlign = 'center'
    this.ctx.textBaseline = 'middle'
    
    // 绘制文字并获取像素数据
    this.ctx.fillText(
      this.text, 
      this.canvas.width / 2,
      this.canvas.height / 2
    )
    
    const imageData = this.ctx.getImageData(
      0, 0,
      this.canvas.width,
      this.canvas.height
    )
    
    // 直接创建粒子，但给予延迟
    for (let y = 0; y < this.canvas.height; y += 6) {
      for (let x = 0; x < this.canvas.width; x += 6) {
        const index = (y * this.canvas.width + x) * 4
        const alpha = imageData.data[index + 3]
        
        if (alpha > 128) {
          const color = `hsl(${Math.random() * 360}, 80%, 60%)`
          // 添加1秒延迟
          this.particles.push(new Particle(x, y, color, 1))
        }
      }
    }
    
    // 立即开始动画
    this.animate()
  }

  animate() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    
    for (let i = this.particles.length - 1; i >= 0; i--) {
      const particle = this.particles[i]
      particle.update()
      particle.draw(this.ctx)
      
      if (particle.life <= 0) {
        this.particles.splice(i, 1)
      }
    }
    
    if (this.particles.length > 0) {
      this.animationId = requestAnimationFrame(this.animate.bind(this))
    }
  }

  destroy() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId)
    }
    window.removeEventListener('resize', this.resize)
    this.particles = []
  }
} 